<template>
	<div class="personHomepage">
		<div class="divide"></div>
		
		<!-- 帖子 -->
			<comments :commentsList="commentsList"/>
		<!-- 帖子 end -->
		<div class="tips" v-if="commentsList.length!=0">已加载全部</div>
		<div class="no-tips" v-if="commentsList.length==0">
			<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noCollect.png" mode="widthFix"></image>
			<div>暂未发表过评论</div>
		</div>
	</div>
</template>

<script>
	let defaultJpg=require('../../../static/img/quan-active.png');
	import comments from '@/pages/components/notice/comments/index.vue';
	import totalContent from '@/pages/components/notice/totalContent/index.vue';
	import personInvitation from "@/pages/components/person/personInvitation.vue";
	import Invitation from "@/pages/components/invitationItems/invitation";
	
	export default {
		components:{
			comments,
			personInvitation,
			Invitation
		},
		data() {
			return {
				userId:'',
				defaultJpg:defaultJpg,
				pageNum:1,
				commentsList:[],//评论列
				limit:10,
			}
		},
		methods: {
			async getMyCommentList(){
				//获取我(相关）的贴子列表
				let params={
					user_token:uni.getStorageSync('userToken'),
					page:this.pageNum,
					limit:this.limit
				}
				let res=await this.$api.getMyCommentList(params);
				if(res.data.level=='success'){
					let data=res.data.data;
						this.commentsList=[...this.commentsList,...data]
				}
			},
			
			
		},
		onLoad(options) {
				
				this.userId=options.userId?options.userId:'';//3
				this.getMyCommentList()
		},
		onReachBottom() {
			this.pageNum++;
			this.getMyCommentList()
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.no-tips{
		margin-top:20vh;
		@include flexWrap();
		background: #fff;
		color:#6F7073;
		&>div{
			text-align: center;
			width: 100%;
		}
		}
		.divide{
			height: 20rpx;
			background-color: #F1F4F7;
		}
	.personHomepage{
		background-color: #F1F4F7;
		min-height: 100vh;
		.tips{
			width:100%;
			text-align: center;
		}
		//头部
		.header{
			border-bottom: 1px solid #eee ;
			padding:20rpx;
			background: pink;
			
		}
		.header-main{
			@include flexWrap(space-between,center);
			margin-bottom: 30rpx;
			.header-logo{
				width:120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin: 0 20rpx 0 0;
			}
			
		}
		.header-nickname{
			font-size: 52rpx;
			color:#fff;
			font-weight: 600;
		}
		.header-desc{
			color:rgba(254,254,254,1);
			margin-top:30rpx;
		}
		.header-content{
			width: 100%;
			@include  flex(space-between,center);
			.header-content-tag-wrapper{
				@include  flexWrap(space-between);
				width: 30%;
				.header-content-tag{
					text-align: center;
					.num{
						font-weight: bold;
						font-size: 36rpx;
						color: #fff;
						margin-bottom: 10rpx;
					}
					.name{
						font-size: 22rpx;
						color:rgba(139,141,147,1);
					}
				}
			}
			.header-btn-wrapper{
				width: 100%;
				@include  flexWrap(flex-end);
				flex:1;
				.header-btn{
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					font-weight: bold;
					font-size: 30rpx;
					border-radius: 10rpx;
					color:#fff;
					padding: 0 10px;
					background:rgba(0,0,0,0.5)
				}
				.header-talk{
					margin-left:10rpx;
					text-align: center;
					background:$bgColor;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 10px;
					font-weight: bold;
					font-size: 30rpx;
					border-radius: 10rpx;
				}
			}
		}
		//头部简介
		.header-desc{
			margin:20rpx 0;
			font-size: 24rpx;
		}
		//头部标签列
		.header-tag-list{
			@include  flexWrap(flex-start);
			&-item{
				margin:20rpx;
				font-size: 20rpx;
				border-radius: 15rpx;
				border:2rpx solid #eee;
				padding:10rpx 15rpx;
			}
		}
	}
</style>
